import React from 'react';
import type { FormProps } from 'antd';
import { Button, Form, Input,message } from 'antd';
import { useNavigate } from 'react-router-dom';
// 使用css模块化 sass语法
import style from './login.module.scss'
import { loginApi } from '@/api/requestApi.ts'

type FieldType = {
  account: string;
  password: string;
};

const App: React.FC = () => {
  const navigate = useNavigate()

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    // console.log('Success:', values);
    const {account,password} = values
    // console.log(account,password)
    const res = await loginApi({account,password})
    // console.log(res)
    if(res && res.status === 200){
      // 登录成功时的提示信息
      message.success('登录成功')
      // 等待1秒钟跳转路由
      setTimeout(()=>{
        // 跳转路由 /home
        navigate('/sys/index')
      },1000)

      // 需要将服务端返回的token令牌进行本地存储
      localStorage.setItem('token',res.data.token)
      
    }else {
      message.error('登录成功')
    }
  };



  return (
    <div className={style.container}>
    <div className={style['content']}>
      <h2>文章发布系统</h2>
    <Form
    name="basic"
    labelCol={{ span: 4 }}
    wrapperCol={{ span: 18 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      label="账号" // 设置输入框文本
      name="account" // 获取输入框数据的字段名称
      rules={[{ required: true, message: '请输入账号' }]} // 校验规则
    >
      <Input />
    </Form.Item>

    <Form.Item<FieldType>
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
      <Button>
        取消
      </Button>
    </Form.Item>
  </Form>
    </div>
  
  </div>
  )
 
};

export default App;